<template>
  <div>
    <div class="header">
      <el-button type="primary" size="mini" @click="handleCreate()"
        >新增</el-button
      >
      <el-button type="primary" size="mini" @click="$router.go(-1)"
        >返回</el-button
      >
    </div>
    <el-table
      :data="tableData"
      stripe
      border
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column prop="id" label="字典编码"> </el-table-column>
      <el-table-column prop="dictName" label="字典标签"> </el-table-column>
      <el-table-column prop="dictValue" label="字典健值 "> </el-table-column>
      <el-table-column prop="dictSort" label="字典排序"> </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          {{ scope.row.status == 0 ? "正常" : "停用" }}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column prop="name" label="操作 ">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row.id)" type="text" size="small"
            >修改</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹框 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="字典类型">
          <el-input v-model="dicType" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="数据标签">
          <el-input v-model="form.lable"></el-input>
        </el-form-item>
        <el-form-item label="数据健值">
          <el-input v-model="form.dicValue"></el-input>
        </el-form-item>
        <el-form-item label="显示排序">
          <el-input v-model="form.sort" type="number"></el-input>
        </el-form-item>
        <el-form-item label="数据健值">
          <el-radio-group v-model="status">
            <el-radio :label="0">正常</el-radio>
            <el-radio :label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- v-if="dicType === 'send_activity'" -->
        <div v-if="dicType === '***'">
          <el-form-item label="推送对象">
            <el-button type="text" @click="handleChangelable()"
              >选择人员</el-button
            >
          </el-form-item>
          <el-form-item label="已选人员" v-if="isRealy">
            <el-input
              type="textarea"
              style="width: 80%"
              :rows="2"
              :disabled="true"
              placeholder="请输入内容"
              v-model="personList"
            >
            </el-input>
          </el-form-item>
        </div>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDicData()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页 -->
    <Pagination
      :total="total"
      :pageNum="pageNum"
      :pageSize="pageSize"
      @pageChange="pageChange"
    />
    <!-- 选择人弹框 -->
    <sendDialog ref="send" @fetchPersonId="fetchPersonId(arguments)"></sendDialog>
  </div>
</template>

<script>
// import pagegation from '../../components/pagination'
import sendDialog from "../components/sendDialog copy";
export default {
  data() {
    return {
      title: "添加字典数据",
      tableData: [],
      dialogVisible: false,
      isRealy: true,
      personList: "",
      form: {
        lable: "",
        dicValue: "",
        sort: "",
        desc: "",
        staffAccountList: [],
      },
      dicType: this.$route.query.dicType,
      status: 0,
      total: 0,
      pageNum: 1,
      pageSize: 10,
      dicId: null,
    };
  },
  components: {
    sendDialog,
  },
  created() {
    this.fetchTableList();
  },
  methods: {
    //点击选择人员
    handleChangelable() {
      this.$refs.send.init("字典管理", this.dicId, this.dicId);
    },
    //  获取子组件人员id
    fetchPersonId(params) {
      let r_staffAccount = []
      let q_staffAccount = []
      let r_staffName = []
      let q_staffName = []
      if (params[0]) {
        params[0].map(item => {
          r_staffAccount.push(item.staffAccount)
          r_staffName.push(item.staffName)
        })
      }
      if (params[1]) {
        params[1].map(item => {
          q_staffAccount.push(item.orgId)
          q_staffName.push(item.orgName)
        })
      }
      this.form.staffAccountList = r_staffAccount.toString() + '#' + q_staffAccount;
      this.personList = [...r_staffName, ...q_staffName].toString();
    },
    // 修改
    handleEdit(id) {
      this.title = "修改字典数据";
      this.dicId = id;
      this.$http({
        url: this.$http.adornUrl(`/sysdictdata/info/${id}`),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        console.log(data, "data");
        if (data && data.code === 0) {
          this.dialogVisible = true;
          this.form.lable = data.sysDictData.dictName;
          this.form.dicValue = data.sysDictData.dictValue;
          this.form.sort = data.sysDictData.dictSort;
          this.status = Number(data.sysDictData.status);
          this.form.desc = data.sysDictData.remark;
          // console.log(data.sysDictData.staffAccountList);
          // console.log(data.sysDictData.staffAccountList.toString());
          this.personList = ""
          let staffAccountAndNameVos = data.sysDictData.staffAccountAndNameVos;
          staffAccountAndNameVos.forEach(element => {
            console.log(element.staffName);
            this.personList += element.staffName + ","
          });
          
          // staffAccountAndNameVos.map(item => {
          //   console.log(item.staffName);
          //   this.personList = item.staffName + ","
          // })
          // console.log(list);
        //将code数据重新push到之前的code数组中
        //   list.map((item) => {
        //     console.log(item.toString());
        //   this.personList(item.toString());
        // });
        }
        console.log(this.personList, "this.personList");
      });
    },
    // 删除
    handleDelete(id) {
      let ids = [id];
      this.$confirm(`您确定要删除吗`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/sysdictdata/delete"),
            method: "post",
            data: this.$http.adornData(ids, false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.fetchTableList();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    // 弹框确定
    submitDicData() {
      if (this.dicId) {
        this.handleUpdateDic();
      } else {
        this.handleAddDic();
      }
    },
    // 新增
    handleAddDic() {
      // console.log( this.form.staffAccountList,"dddddddd");
      // console.log( this.personList,"personList");
      // return
      this.$http({
        url: this.$http.adornUrl("/sysdictdata/save"),
        method: "post",
        data: this.$http.adornData({
          dictName: this.form.lable,
          dictValue: this.form.dicValue,
          dictSort: this.form.sort,
          dictType: this.dicType,
          status: this.status,
          staffAccountList: this.form.staffAccountList, //选择人员编号
          remark: this.form.desc,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.fetchTableList();
          this.dialogVisible = false;
        }
      });
    },
    // 修改
    handleUpdateDic() {
      this.$http({
        url: this.$http.adornUrl("/sysdictdata/update"),
        method: "post",
        data: this.$http.adornData({
          id: this.dicId,
          dictName: this.form.lable,
          dictValue: this.form.dicValue,
          dictSort: this.form.sort,
          dictType: this.dicType,
          status: this.status,
          staffAccountList: this.form.staffAccountList,
          remark: this.form.desc,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "更新成功",
            type: "success",
          });
          this.fetchTableList();
          this.dialogVisible = false;
        } else {
          this.$message({
            message: data.msg,
            type: "error",
          });
        }
      });
    },
    fetchTableList() {
      this.$http({
        url: this.$http.adornUrl("/sysdictdata/list"),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageNum,
          limit: this.pageSize,
          dictType: this.$route.query.dicType,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.total = data.page.totalCount;
          this.tableData = data.page.list;
        }
      });
    },
    // 新增
    handleCreate() {
      this.dicId = null;
      this.form.lable = "";
      this.form.dicValue = "";
      this.form.sort = "";
      this.form.status = "";
      this.form.desc = "";
      this.personList = "";
      this.dialogVisible = true;
    },
    pageChange(page) {
      console.log(page);
      this.pageSize = page._pageSize;
      this.pageNum = page._currentPage;
      this.fetchTableList();
    },
  },
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
}
</style>